import React from 'react';
import { Route, Link, BrowserRouter as Router, NavLink, Switch, Redirect } from 'react-router-dom';
import './index.css';
export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <Header></Header>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <NavLink to="/home" activeClassName="my-active">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink to="/my" activeClassName="my-active">
                我的音乐
              </NavLink>
            </li>
            <li>
              <NavLink to="/friend" activeClassName="my-active">
                我的朋友
              </NavLink>
            </li>
          </ul>

          <Switch>
            <Redirect from="/" to="/home" exact></Redirect>
            <Route path="/home" component={Home}></Route>
            {/* 1. 改造Route的path成为动态路由 /name/:自定义属性名 */}
            <Route path="/my/:id" component={MyMusic}></Route>
            <Route path="/friend" component={Friend}></Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

function Home(props) {
  const handleClick = () => {
    props.history.go(-1);
  };
  return (
    <h1>
      我是首页组件
      <button onClick={handleClick}>点我调到音乐</button>
    </h1>
  );
}
function Header(props) {
  return <h1>我是Head而组件，我没有被设置路由</h1>;
}

function Friend(params) {
  return (
    <div>
      <h1>我是Friend</h1>
      <NavLink to="/friend/first">调到第一个朋友</NavLink>
      <br />
      <NavLink to="/friend/second">调到第二朋友</NavLink>
      <br />
      <NavLink to="/friend/third">调到第三个朋友</NavLink>
      <Switch>
        <Route path="/friend" component={FriendHome}></Route>
        <Route path="/friend/first" component={Friend1}></Route>
        <Route path="/friend/second" component={Friend2}></Route>
        <Route path="/friend/third" component={Friend3}></Route>
      </Switch>
    </div>
  );
}

function FriendHome(params) {
  return <h1>朋友首页-父子级重名路由</h1>;
}

function MyMusic(props) {
  // 2.通过props.matchs.params去接收参数对象
  console.log('props.match  ----->  ', props.match.params.id);
  return <h1>我是我的音乐件</h1>;
}

function Friend1(params) {
  return <h1>我是第一个朋友</h1>;
}
function Friend2(params) {
  return <h1>第二个朋友</h1>;
}
function Friend3(params) {
  return <h1>第三个朋友</h1>;
}
